<template>
    <div class="cart-wrapper">
        <h2>购物车</h2>
        <table>
            <tr>
                <th>商品ID</th>
                <th>商品名稱</th>
                <th>商品价格</th>
                <th>商品数量</th>
                <th>商品总价</th>
                <th>操作</th>
            </tr>
            <tr v-for="item in list" :key="item.id">
                <td>{{ item.id }}</td>
                <td>{{ item.name }}</td>
                <td>￥{{ item.price }}</td>
                <td>
                    <input type="button" value="-" name="minus" @click="item.num--" :disabled="item.num===0"/>
                    <input type="number" :value="item.num" name="amount" />
                    <input type="button" value="+" name="plus" @click="item.num++"/>
                </td>
                <td>￥{{ (item.price * item.num).toFixed(2) }}</td>
                <td><a href="#">删除</a></td>
            </tr>
        </table>
        <p>总价:{{totalPrice}}</p>
    </div>
</template>

<script>
export default {
    data() {
        return {
            list: [
                { id: 1001, name: "javascript高级编程", price: 88.9, num: 1 },
                { id: 1002, name: "vue高级编程", price: 99.9, num: 1 },
                { id: 1003, name: "react高级编程", price: 108.9, num: 1 },
            ],
        };
    },
    computed:{
        totalPrice(){
            const list = this.list
            let sum = list.reduce((previouValue,currentValue)=>{
                return previouValue += currentValue.price * currentValue.num
            },0)
            return sum.toFixed(2)
        }
    }
};
</script>

<style lang="scss" scoped>
.cart-wrapper {
    width: 1000px;
    margin: 0 auto;
    table {
        width: 100%;
        line-height: 40px;
        th,
        td {
            border-bottom: 1px dotted gray;
        }
        input[name="amount"] {
            width: 30px;
            text-align: center;
        }
    }
}
</style>
